<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
<div id="app">
    <el-container>
        <el-header>新闻列表</el-header>
        <el-container>
            <el-aside width="200px">welcome to this system</el-aside>
            <el-container>
                <el-main>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="createTime" label="日期" width="180">
                        </el-table-column>
                        <el-table-column prop="title" label="标题" width="180">
                        </el-table-column>
                        <el-table-column prop="authorId" label="作者">
                        </el-table-column>
                    </el-table>
                </el-main>
                <el-footer>Copy right for GaoLainan;
                    <a href="login.html"> 后台管理</a>
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--导入jquery的库-->
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [],
                datasets: []
            }

        },
        methods: {
            test: function() {
                console.log(this.tableData)
            }
        },
        created() {
            let that = this
            console.log("this page is created!")
            console.log(this.tableData)
            $.ajax({
                type: "post",
                url: "http://localhost:8080/news/top",
                data: {},
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                success: function(data) {
                    // for (var i = 0; i < data.length; i++) {
                    //     var str = data[i].createTime
                    //     var res = ''
                    //     for (var j = 0; j < str.length; j++) {
                    //         if (j != "T")
                    //             res += str[j]
                    //     }
                    //     this.data[i].createTime = str
                    // }
                    console.log(data[0].createTime)
                    that.tableData = data
                }
            })
        }

    })
</script>
<style>
    .el-header,
    .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body>.el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>

</html>